<template>
    <div class="container">
        <div class="guide">
            <!-- query传参，模板字符串写法 -->
            <!-- <router-link
        :style="cssVar"
        v-for="detail in details"
        :key="detail.id"
        :to="`/home/message/detail?id=${detail.id}&title=${detail.title}`"
      >
        {{ detail.title }}
      </router-link> -->

            <!-- params传参，模板字符串写法 -->
            <!-- <router-link
        :style="cssVar"
        v-for="detail in details"
        :key="detail.id"
        :to="`/home/message/detail/${detail.id}/${detail.title}`"
      >
        {{ detail.title }}
      </router-link> -->

            <!-- query传参，对象写法 -->
            <!-- <router-link
        :style="cssVar"
        v-for="detail in details"
        :key="detail.id"
        :to="{
          path: '/home/message/detail',
          query: {
            id: detail.id,
            title: detail.title,
          },
        }"
      >
        {{ detail.title }}
      </router-link> -->

            <!-- params传参，对象写法 -->
            <router-link
                :style="cssVar"
                v-for="detail in details"
                :key="detail.id"
                :to="{
                    name: 'detail',
                    params: {
                        id: detail.id,
                        title: detail.title,
                    },
                }"
            >
                {{ detail.title }}
            </router-link>
        </div>
        <router-view class="content"></router-view>
    </div>
</template>

<script>
import Detail from "./Detail.vue";
export default {
    name: "Message",
    data() {
        return {
            details: [
                { id: 1, title: "消息001" },
                { id: 2, title: "消息002" },
                { id: 3, title: "消息003" },
            ],
        };
    },
    components: {
        Detail,
    },
    computed: {
        cssVar() {
            return {
                "--height": 100 / this.details.length + "%",
            };
        },
    },
};
</script>

<style scoped>
.container {
    width: 100%;
    height: 100%;
    display: flex;
}

.guide {
    width: 20%;
    display: flex;
    flex-direction: column;
    border-left: 1px solid grey;
    border-right: 1px solid grey;
}

.guide > a {
    width: 100%;
    height: var(--height);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-top: 1px solid rebeccapurple;
    border-bottom: 1px solid rebeccapurple;
}

.content {
    width: 80%;
    height: 100%;
}
</style>
